import classNames from 'classnames';
import { useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import BackButton from 'src/component/BackButton';
import Button from 'src/component/Button';
import Form from 'src/component/Form';
import FormInput from 'src/component/FormInput';
import FormSelect from 'src/component/FormSelect';
import SelectOption from 'src/component/SelectOption';
import { Page } from 'src/constant/Page';
// import { Bank } from 'src/model/Bank';
// import { BankAccountForm } from 'src/model/Form';
import { RootState } from 'src/redux/store';
import { openSnackbar } from 'src/redux/uiSlice';
import { addMyBank } from 'src/service/userService';
import { getSysBank } from 'src/service/sysConfigService';
import style from './BankAccount.module.scss';
type Bank = any
type BankAccountForm = {
    FBGj: string,
    FBMc: string,
    FBFy: string,
    FBSf: string,
    FBCs: string,
    FBLx: string,
    FBZh: string,
    FBHm: string,
}

const BankAccount = () => {
    const dispatch = useDispatch();
    const navigate = useNavigate();
    const [bank, setBank] = useState<Bank[]>();
    const methods = useForm<BankAccountForm>();
    const { accountInfo: info } = useSelector((rootState: RootState) => rootState.auth);
    const token = localStorage.getItem("token")
    useEffect(() => {
        getSysBank({})
            .then((res) => {
                if (res.success) {
                    setBank(res.list)
                } else {
                    dispatch(openSnackbar({ message: res.message, severity: 'alert' }))
                }
            })
            .catch((e) => dispatch(openSnackbar({ message: e, severity: 'alert' })));
    }, []);

    const onSubmit = (data: BankAccountForm) => {
        addMyBank({
            ...data,
            FUserID: info?.FID,
            token: token
        }).then(res => {
            if (res.success) navigate(Page.Account)
        }).catch((e) => dispatch(openSnackbar({ message: e, severity: 'alert' })));
        // createBankAccount(data)
        //     .then(() => navigate(Page.Account))
        //     .catch((e) => dispatch(openSnackbar({ message: e, severity: 'alert' })));
    };

    if (!bank) return <></>;

    return (
        <div>
            <BackButton />
            <div className={style.heading}>新增银行帐户</div>
            <div className={style.detail}>新增银行帐户作为收/付款用，限定本人银行帐户。</div>
            <Form className={style.content} methods={methods} onSubmit={onSubmit}>
                <div className={style.title}>银行资讯</div>
                <div className={style.info}>
                    <div className={classNames(style.item, style.width33)}>
                        <FormSelect
                            name="FBGj"
                            label="银行所在国家/地区"
                            defaultValue="中国"
                            asterisked
                        >
                            <SelectOption value="中国">中国</SelectOption>
                        </FormSelect>
                    </div>
                    <div className={classNames(style.item, style.width33)}>
                        <FormSelect name="FBMc" label="选择银行" asterisked>
                            {bank.map((v) => (
                                <SelectOption key={v.FID} value={v.FYhMc}>
                                    {v.FYhMc}
                                </SelectOption>
                            ))}
                        </FormSelect>
                    </div>
                    <div className={classNames(style.item, style.width33)}>
                        <FormInput
                            name="FBFy"
                            label="银行分行"
                            type="text"
                            asterisked
                            required
                        />
                    </div>
                </div>
                <div className={style.info}>
                    <div className={classNames(style.item, style.width33)}>
                        <FormInput
                            name="FBSf"
                            label="银行省份"
                            type="text"
                            asterisked
                            required
                        />
                    </div>
                    <div className={classNames(style.item, style.width33)}>
                        <FormInput
                            name="FBCs"
                            label="银行城市"
                            type="text"
                            asterisked
                            required
                        />
                    </div>
                    <div className={classNames(style.item, style.width33)}>
                        <FormSelect
                            name="FBLx"
                            label="银行帐户类型"
                            defaultValue="personal"
                            asterisked
                        >
                            <SelectOption value="personal">个人</SelectOption>
                            <SelectOption value="corporate">公司</SelectOption>
                        </FormSelect>
                    </div>
                </div>
                <div className={style.title}>帐户资讯</div>
                <div className={style.item}>
                    <FormInput
                        name="FBZh"
                        label="帐号"
                        type="text"
                        asterisked
                        required
                    />
                </div>
                <div className={style.item}>
                    <FormInput
                        name="FBHm"
                        label="户名"
                        type="text"
                        asterisked
                        required
                    />
                </div>
                <div className={style.submitButton}>
                    <Button size="large" type="submit">
                        送出
                    </Button>
                </div>
            </Form>
        </div>
    );
};

export default BankAccount;
